Chrome Developer Tools

日本語にも対応している。

チートシート

起動: F12

コンソールや検索結果の表示のON/OFF: ESC

ファイル検索

Cmd + o

Webページ上のすべてのファイルを横断検索

Cmd + Option + F

めちゃくちゃ便利。CTFであればflagと検索するなど。

オフラインにする

ネットワークパネルでスロットリングをオフラインに。

コマンドメニュー

したいことを検索できる。

Cmd + Shift + p

キャッシュの消去とハード再読み込み

Developer Toolsを開いた状態でリロードボタンを右クリックすると選択できる。

コマンドメニューからも可能。

JavaScriptでChrome Developer Toolsを開いたことを検知する -> 参考

globalThis.hoge = hogeとするとコンソールで使えるようになるらしい。

ダークテーマにする: Settings -> Preferences -> Appearance

ソース（Sources）パネル

Local modifications: 編集履歴が見れる。Saveもできるしデザインに便利。

Local Overrides: 変更したJSやCSSをファイルとして保存しておける。リロードしても大丈夫。

Code Coverage: コードカバレッジがわかる。

変数の上にマウスポインターを乗せると変数の値を確認可能。

Scopeで現在実行中のスコープの変数が表示。関数内のローカル変数であればLocalツリーに表示。

常に追いたい変数はWatchに変数名を入力すると楽。

ログポイント: 指定した命令が実行される前に、指定した変数などをコンソールに出力できる。ブレークポイントと異なり実行は一時停止しない。

要素（Elements）パネル

スタイル（Styles）

user agent stylesheetはブラウザのデフォルトCSS。

Inherited fromは親タグの継承。

色をクリックするとカラーピッカーが起動。

数値の増減は矢印キーでも可能。

+ボタンで新たにスタイルを追加。

コンソール（Console）パネル

$はjQueryが無ければ独自のセレクターになっている。

$$(selecter)で全て取得。

Live Expressions: 常に監視したい変数や式がある場合に使える。250ミリ秒間隔で更新される。

https://gyazo.com/67c438303734d8b580c609a73f3e7a12

Chrome 80からletの再宣言ができるようになった。

コンソールでlet a = 1;した実行した後にlet a = 1;が可能。

ネットワーク（Network）パネル

青い線がDOMContentLoaded、赤い線がload。

オフラインでの動作確認。

低スペック、遅い回線での動作確認。

アプリケーション（Applications）パネル

キャッシュ。消去もできる。

Local Storage見れる。

パフォーマンスパネル

パフォーマンスを良くする提案をしてくれる。

セキュリティパネル

TLS証明書についての情報が見れる。

https://scrapbox.io/files/62caa6bc1943e3001d033f44.png